import React from 'react';
import {Balloon, Field, Form, Icon, Message, NumberPicker, Select, Upload} from "@alifd/next";
import './index.css'
import {Grid} from "@alifd/next";

const FormItem = Form.Item;
const {Row, Col} = Grid;
const {Option} = Select;

const Index = (props) => {
    const {value, setBgData} = props;

    let field = Field.useField({
        values: value,
        onChange: (name, value) => {
            setBgData(field.getValues())
        }
    });

    const {init} = field;

    const onDragOver = () => {
        console.log("dragover callback");
    }

    const onDrop = (fileList) => {
        console.log("drop callback : ", fileList);
    }

    const beforeUpload = (file, options) => {
        if (!["image/png", "image/jpg", "image/jpeg"].includes(file.type)) {
            Message.warning(`文件格式不正确！`);
            return false;
        }
        if (file.size > 50 * 1024 * 1024) {
            Message.warning(`文件大小必须小于50M`);
            return false;
        }
        return file;
    };


    return (

        <div style={{margin: "0 auto"}}>
            <div className={"bg__title"}>背景设置</div>
            <Form style={{width: "80%", margin: "20px auto auto auto"}}>
                <FormItem
                    name="bgImage"
                    label={
                        <span>
                                    背景图片&nbsp;
                            <Balloon type="primary" trigger={<Icon type="prompt" size="xs"/>}
                                     closable={false}>当未设置【宽度】和【高度】时，则按照【背景图片】宽高匹配画布宽高。</Balloon>
                                </span>
                    }
                    required
                    requiredMessage="请上传背景图片！"
                >
                    <Upload.Dragger
                        listType="image"
                        action={`${window.appConfig.servicePath}/minio/upload`}
                        accept="image/png, image/jpg, image/jpeg"
                        onDragOver={onDragOver}
                        onDrop={onDrop}
                        limit={1}
                        beforeUpload={beforeUpload}
                        {...init("bgImage")}
                    >
                        <div className="next-upload-drag">
                            <p className="next-upload-drag-icon">
                                <Icon type="upload"/>
                            </p>
                            <p className="next-upload-drag-text">
                                点击或拖动文件到虚线框内上传
                            </p>
                            <p className="next-upload-drag-hint">支持 PNG，JPG，JPEG 等类型的文件，50MB以内</p>
                        </div>
                    </Upload.Dragger>

                </FormItem>
                <Row gutter={16}>
                    <Col>
                        <FormItem
                            name="width"
                            label="宽度"
                        >
                            <NumberPicker
                                style={{width: "100%"}} min={0}
                                innerAfter={"px"}
                                {...init("bgImageWidth")}/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="height"
                            label="高度"
                        >
                            <NumberPicker
                                style={{width: "100%"}} min={0}
                                innerAfter={"px"}
                                {...init("bgImageHeight")}/>
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col>
                        <FormItem
                            name="ZoomMode"
                            label={
                                <span>
                                    ZoomMode&nbsp;
                                    <Balloon type="primary" trigger={<Icon type="prompt" size="xs"/>}
                                             closable={false}>当未设置【宽度】或【高度】时，该项不生效</Balloon>
                                </span>
                            }
                            required
                        >
                            <Select
                                style={{width: "100%"}}
                                {...init("bgImageZoomMode")}
                            >
                                <Option value="Origin">Origin</Option>
                                <Option value="Width">Width</Option>
                                <Option value="Height">Height</Option>
                                <Option value="WidthHeight">WidthHeight</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="OutputFormat"
                            label="OutputFormat"
                            required
                        >
                            <Select
                                style={{width: "100%"}}
                                {...init("bgImageOutputFormat")}
                            >
                                <Option value="jpg">jpg</Option>
                                <Option value="jpeg">jpeg</Option>
                                <Option value="png">png</Option>
                                <Option value="bmp">bmp</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={16}>
                    <Col>
                        <FormItem
                            name="高斯模糊"
                            label="高斯模糊"
                        >
                            <NumberPicker
                                style={{width: "100%"}}
                                {...init("bgImageBlur")}/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="圆角"
                            label={
                                <span>
                                    圆角&nbsp;
                                    <Balloon type="primary" trigger={<Icon type="prompt" size="xs"/>}
                                             closable={false}>设置整图圆角（输出格式必须为PNG）</Balloon>
                                </span>
                            }>
                            <NumberPicker
                                style={{width: "100%"}}
                                {...init("bgImageRoundCorner")}/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="图片保存质量"
                            label={
                                <span>
                                    图片保存质量&nbsp;
                                    <Balloon type="primary" trigger={<Icon type="prompt" size="xs"/>}
                                             closable={false}>图片保存质量（0.0~1.0，仅jpg格式有效）</Balloon>
                                </span>
                            }>
                            <NumberPicker style={{width: "100%"}}
                                          min={0} max={1} step={0.1}
                                          {...init("bgImageQuality")}/>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </div>

    );
};

export default Index;